<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css"/>
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
	<div>
		<form id="form_product" class="layui-form" action="" onsubmit="return falise">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">商品名：</label>
					<div class="layui-input-inline">
						<input type="text" name="name" id="name" 
							autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label">价格：</label>
					<div class="layui-input-inline" style="width: 70px;">
						<input type="text" name="beginPrice" id="beginPrice" placeholder="￥"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 70px;">
						<input type="text" name="endPrice" id="endPrice" placeholder="￥"
							autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label">品牌</label>
					<div class="layui-input-inline" style="width: 150px;">
						<select name="brand" id="brand" lay-filter="aihao">
							<option value=""></option>
							<option value="联想">联想</option>
							<option value="戴尔">戴尔</option>
							<option value="华硕">华硕</option>
						</select>
					</div>
					<label class="layui-form-label">类别</label>
					<div class="layui-input-inline" style="width: 150px;">
						<select name="categoryName" id="categoryName" lay-filter="aihao">
							<option value=""></option>
							<option value="笔记本">笔记本</option>
							<option value="游戏本">游戏本</option>
							<option value="轻薄本">轻薄本</option>
							<option value="商务本">商务本</option>
						</select>
					</div>
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="demo1">立即提交</button>
				</div>
			</div>
		</form>
	</div>

	<table id="demo" lay-filter="test"></table>

	<script>
		layui.use(['table', 'form', 'layer'], function() {
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var $ = layui.$;
			table.reload('form_product',{
				  where: { //设定异步数据接口的额外参数，任意设
					 	name: $("#name").val(),
					 	beginPrice: $("#beginPrice").val(),
					 	endPrice: $("#endPrice").val(),
						brand: $("#brand").val(),
						categoryName: $("#categoryName").val()
				  }
				  ,page: {
				    curr: 1 //重新从第 1 页开始
				  }
			});
		});
	</script>
</body>
</html>